<template lang="pug">
    view       
        TaskNavigation(@navigation-change="navigation_change")
        view(class="cu-list menu sm-border")
            view(class="cu-item" v-for="item in tasks")
                view(class="content")
                    text(class="cuIcon-circlefill text-grey")
                    text(class="text-black" @click="navigateTo(`/pages/task-items/index?id=${item.id}`)") {{item.task_name}}
                view(class="action")
                  text(class="text-black") {{ item | count_sum }}
     
        view(v-if="tasks.length === 0 && !loading" class="text-center padding")
            text(class="text-orange ") 您还没有内容！ 
        LoadProgress(:visible="loading")
</template>

<script>
import BaseMixin from "../../mixins/BaseMixin.js";
import uniIcons from ".../../components/uni-icons/uni-icons.vue";
import LoadProgress from "@/components/colorui/load-progress";
import TaskNavigation from "./task-navigation";

export default {
  mixins: [BaseMixin],

  components: { uniIcons, LoadProgress, TaskNavigation },

  data() {
    return {
      share_tasks: [],

      my_tasks: [],

      loading: false,

      cur_nav: "my_tasks"
    };
  },

  computed: {
    tasks() {
      return this.cur_nav === "my_tasks" ? this.my_tasks : this.share_tasks;
    }
  },

  methods: {
    get_tasks() {
      this.my_tasks = this.$store.state.todo.tasks || [];
      this.loading = true;
      this.get("/todo_tasks/", {})
        .then(tasks => {
          this.my_tasks = tasks;
          this.$store.dispatch("todo/update_tasks", tasks);
        })
        .catch(() => {})
        .then(() => {
          this.loading = false;
        });
    },

    get_share_tasks() {
      this.get("/share_list/", {}).then(res => {
        if (!res.success) {
          return;
        }

        this.share_tasks = res.data.map(d => d.task);
      });
    },

    navigateTo(url) {
      return new Promise((resolve, reject) => {
        const options = {
          url: url,
          animationType: "pop-in",
          success: () => resolve,
          fail: () => reject
        };
        uni.navigateTo(options);
      });
    },

    navigation_change(key) {
      this.cur_nav = key;
    }
  },

  filters: {
    count_sum(task) {
      if (!task.items) return 0;
      var finished = task.items.filter(item => item.is_done).length;
      return `${finished}/${task.items.length}`;
    }
  },

  mounted() {
    // this.get_tasks();
    this.get_share_tasks();
  }
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  width: 100vw;
}
</style>
